<template>
  <div style="height: 100%;width: 100%">
    <div style="
          font-weight: bolder;
          font-family: '楷体';
          font-size: 25px;
          width: 100%;
        ">欢迎来到商城管理系统
    </div>
    <div class="total-layout">

      <el-col :span="5.5">
        <el-card>
          <div class="total-frame">
            <img src="@/assets/home_order.png" class="total-icon">
            <div class="total-title">今日订单总数</div>
            <div class="total-value">{{ orderCnt }}</div>
          </div>
        </el-card>
      </el-col>

      <el-row :gutter="28">
        <el-col :span="5.5">
          <el-card>
            <div class="total-frame">
              <img src="@/assets/home_today_amount.png" class="total-icon">
              <div class="total-title">今日销售总额</div>
              <div class="total-value">￥{{ orderTodayTotal }}</div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="5.5">
          <el-card>
            <div class="total-frame">
              <img src="@/assets/home_yesterday_amount.png" class="total-icon">
              <div class="total-title">总销售额</div>
              <div class="total-value">￥{{ orderTotal }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5.5">
          <el-card>
            <div class="total-frame">
              <img src="@/assets/home_user.png" class="total-icon">
              <div class="total-title">商品总量</div>
              <div class="total-value">{{ productTotal }} 件</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div style="display: flex;margin-top: 40px">
      <el-card style=";margin-left: 40px">
        <div style="width: 600px;height: 330px;padding:20px 0 0 20px;">
          <Echart
              :options="optionPie"
              id="optionPie"
          ></Echart>
        </div>
      </el-card>
      <el-card style=";margin-left: 40px;padding:20px 0 0 20px;">
        <div style="width: 600px;height: 330px">
          <Echart
              :options="optionFavoriteTop"
              id="optionFavoriteTop"
          ></Echart>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
import request from "@/api/request";
import echarts from 'echarts'

export default {
  data() {
    return {
      optionPie: {},
      productCnt: [],
      optionFavoriteTop: {},
      favoriteList: [],
      orderCnt: 0,
      productTotal: 0,
      orderTotal: 0,
      orderTodayTotal: 0
    };
  },
  created() {
    this.loadDataProduct();
    this.loadFavoriteTop()
    this.loadDataOrder()
  },
  methods: {
    loadDataOrder() {
      request.get("/api/system/orderCnt").then((res) => {
        this.orderCnt = res.data
      })
      request.get("/api/system/orderToday").then((res) => {
        this.orderTodayTotal = res.data
      })
      request.get("/api/system/orderTotal").then((res) => {
        this.orderTotal = res.data
      })
      request.get("/api/system/productTotal").then((res) => {
        this.productTotal = res.data
      })
    },
    //初始化饼图
    loadDataProduct() {
      request.get("/api/system/viewList").then((res) => {
        this.productCnt = [];
        for (let i = 0; i < res.data.length; i++) {
          this.productCnt.push({
            name: res.data[i].title,
            value: res.data[i].viewCnt,
          });
        }
        this.initPie();
      });
    },
    initPie() {
      this.optionPie = {
        title: {
          text: "商品浏览量统计",
          left: "left",
          textStyle: {
            color: "#235894",
            fontSize: 18
          },
        },
        tooltip: {
          trigger: 'item', // 当鼠标悬浮在某个数据项上时触发

        },
        series: [
          {
            name: "pie",
            type: "pie",
            selectedMode: "single",
            selectedOffset: 30,
            clockwise: true,
            label: {
              fontSize: 18,
              color: "#235894",
            },
            labelLine: {
              lineStyle: {
                color: "#235894",
              },
            },
            data: this.productCnt,
            itemStyle: {
              opacity: 0.7,
              borderWidth: 3,
              borderColor: "#235894",
            },
          },
        ],
      };
    },

    loadFavoriteTop() {
      request.get("/api/system/favoriteList").then((res) => {
        this.favoriteList = {"yAxis": [], "seriesData": []};
        for (let i = 0; i < res.data.length; i++) {
          this.favoriteList['yAxis'].push(res.data[i].title);
          this.favoriteList['seriesData'].push(res.data[i].favoriteCnt);
        }
        this.initFavoriteTop();
      });
    }
    ,

    initFavoriteTop() {
      this.optionFavoriteTop = {
        title: {
          text: "用户收藏商品Top10",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        //图表位置
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        //X轴
        xAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          //不显示X轴刻度线和数字
          splitLine: {show: false},
          axisLabel: {show: false},
        },
        yAxis: {
          type: "category",
          data: this.favoriteList['yAxis'],
          //升序
          inverse: true,
          splitLine: {show: false},
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          //key和图间距
          offset: 10,
          //动画部分
          animationDuration: 300,
          animationDurationUpdate: 300,
          //key文字大小
          nameTextStyle: {
            fontSize: 5,
          },
        },
        series: [
          {
            //柱状图自动排序，排序自动让Y轴名字跟着数据动
            realtimeSort: true,
            name: "数量",
            type: "bar",
            data: this.favoriteList['seriesData'],
            barWidth: 14,
            barGap: 10,
            smooth: true,
            valueAnimation: true,
            //Y轴数字显示部分
            label: {
              normal: {
                show: true,
                position: "right",
                valueAnimation: true,
                offset: [5, -2],
                textStyle: {
                  color: "#333",
                  fontSize: 13,
                },
              },
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 7,
              },
              //颜色样式部分
              normal: {
                barBorderRadius: 7,
              },
            },
          },
        ],
        //动画部分

        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear",
      };

    }
    ,
  },
};
</script>

<style>
.total-layout {
  margin: 20px 0 0 40px;
}

.total-frame {
  border: 1px solid #DCDFE6;
  padding: 35px 20px 20px 20px;
  height: 80px;
  width: 220px;
}

.total-icon {
  color: #409EFF;
  width: 60px;
  height: 60px;
}

.total-title {
  position: relative;
  font-size: 16px;
  color: #909399;
  left: 70px;
  top: -50px;
}

.total-value {
  position: relative;
  font-size: 18px;
  color: #606266;
  left: 70px;
  top: -40px;
}
</style>